<template>
	<view>
		<u-navbar :title="title"></u-navbar>
		<view class="wrap">
			<view class="item" style="width: 30%;background-color: #fff; padding-left: 20rpx;">
				<text>
					合格率：{{correctRate}}
				</text>
			</view>
			<view class="item" style="width: 25%;background-color: #fff;text-align: center;">
				<text style="" @tap="showCardModal" data-target="modalCard">
					<u-icon name="order" color="#999999" size="36"></u-icon>
					<text>
						{{questionIndex+1}}/{{totalNumber+1}}
					</text>
				</text>
			</view>
		</view>
		<u-gap height="80" bg-color="#f5f5f5" :height="20"></u-gap>
		<!-- 题目 -->
		<view class="uni-padding-wrap uni-common-mt">
			<!-- 题目 -->
			<swiper :current="questionIndex" class="swiper-box" @change="swiperChange" :style="{'height':swiperHeight}">
				<swiper-item v-for="(question,index) in questionList" :key="index">
					<!-- 题目 -->
					<view class="cu-bar bg-white solid-bottom">
						<view class="action text-black">
							<text class="cuIcon-title text-red"></text>{{index + 1}}. {{question.title}}
						</view>
					</view>
					<view>
						<!--单选-->
						<radio-group class="block" @change="radioboxChange" v-if="question.type===1">
							<view class="cu-form-group" v-for="(option,index) in question.optionList" :key="index">
								<radio :value="option.id" :disabled="true" :checked="question.userAnswer.indexOf(option.id) > -1 ? true:false"></radio>
								<view class="title text-black">{{option.content}}</view>
							</view>
						</radio-group>
						<!--多选-->
						<checkbox-group class="block" @change="checkboxChange" v-else-if="question.type===2">
							<view class="cu-form-group" v-for="(option,index) in question.optionList" :key="index">
								<checkbox :disabled="true" :value="option.id" :class="question.userAnswer.indexOf(option.id) > -1?'checked':''"
								 :checked="question.userAnswer.indexOf(option.id) > -1?true:false"></checkbox>
								<view class="title text-black">
									<view>{{option.id}}.{{option.content}}</view>
								</view>
							</view>
						</checkbox-group>
					</view>
					<view class="">
						你的选择：{{ question.userAnswer }}
					</view>
					<!-- 解析 -->
					<view v-show="question.showAnswer" class="margin-top solid-top">
						<view class="cu-bar">
							<view class="action  text-grey">
								<text>正确答案：</text>
								<text class="solid-bottom  padding-left text-green">{{question.answer}}</text>
							</view>
						</view>
						<view class="cu-bar cu-bar-title">
							<view class="action  text-grey">
								<text>解析：</text>
							</view>
						</view>
						<view class="text-content padding  text-grey">
							{{question.explain}}
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- <view class="action" @click="moveQuestion(-1)">
				<view class="text-gray">上一题</view>
			</view>
			<view class="action" @click="moveQuestion(1)">
				<view class="text-gray">下一题</view>
			</view> -->
			<view class="" style="text-align: center;">
				<u-button  @click="moveQuestion(-1)" shape="circle" class="u-m-r-15" size="medium" :disabled="questionIndex == 0">上一题</u-button>
				<u-button  @click="moveQuestion(1)" shape="circle" class="u-m-l-15" size="medium" :disabled="questionIndex == questionList.length-1">下一题</u-button>
			</view>
		</view>
		<u-popup v-model="modalCard" mode="top" :mask="true">
			<view class="cu-dialog" @tap.stop>
				<view class="page padding">
					<view v-if="activeShow">
						<u-row gutter="16">
							<u-col span="3" v-for="(question,index) in questionList" :key="index" class="u-m-t-15">
								<view class="cu-btn round" :class="[question.userAnswer.length===0?'line-grey':'bg-haveFinashed']" @click="appointedQuestion(index)">{{index+1}}</view>
							</u-col>
						</u-row>
					</view>
					<view v-else-if="confrimShow">
						<u-row gutter="16">
							<u-col span="3" v-for="(question,index) in questionList" :key="index" class="u-m-t-15">
								<view class="cu-btn round" :class="[question.userAnswer === question.answer ? 'bg-haveFinashed':'bg-red']"
							 @click="appointedQuestion(index)">{{index+1}}</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<view style="text-align: center;padding-bottom: 40upx;">
					<u-button shape="circle" :custom-style="customStyle" size="medium ">交卷</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import unikModal from '../../components/modal/Modal.vue';
	export default {
		components:{
			unikModal
		},
		data() {
			return {
				title:'',
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: 'red'
				},
				checked:false,
				answerArr: [], 
				userAnswerArr: [],
				totalNumber: 0,
				modalTitle: '', //确认按钮标题
				currentType: 0, //当前题型
				questionIndex: 0, //跳转索引
				autoRadioNext: true, //单选题，自动移下一题
				swiperHeight: '400px', //
				modalCard: null, //显示答题卡
				rightQuestionNumber: 0, //正确题目数量
				rightNumber:0,
				mistakeQuestionNumber: 0, //错误题目数量
				mistakeNumber:0,
				questionList: [{
						id: 1,
						title: "在以下数据类型中，不是Java基础数据类型的是( )",
						type: 1,
						optionList: [{
							id: "A",
							content: "int"
						}, {
							id: "B",
							content: "double"
						}, {
							id: "C",
							content: "char"
						}, {
							id: "D",
							content: "String"
						}],
						answer: "D",
						userAnswer: "",
						explain: "String类型是引用数据类型，不属于基本数据类型"
					},
					{
						id: 2,
						title: "Java所定义的版本中不包括( )",
						type: 1,
						optionList: [{
							id: "A",
							content: "J2EE"
						}, {
							id: "B",
							content: "J2ME"
						}, {
							id: "C",
							content: "J2SE"
						}, {
							id: "D",
							content: "J2HE"
						}],
						answer: "D",
						userAnswer: "",
						explain: "本题考察的是Java的发展简史，Java版本包括J2EE 、 J2ME 、 J2SE ，不存在J2HE"
					},
					{
						id: 3,
						title: "下列选项中不属于Java算术运算符的是( )。",
						type: 1,
						optionList: [{
							id: "A",
							content: "/"
						}, {
							id: "B",
							content: "%"
						}, {
							id: "C",
							content: "*"
						}, {
							id: "D",
							content: "!="
						}],
						answer: "D",
						userAnswer: "",
						explain: "!= 是逻辑运算符"
					},
					{
						id: 4,
						title: "在Java中,( )方法可以比较两个对象的值是否相等,如两个对象值相等,则返回true。",
						type: 1,
						optionList: [{
							id: "A",
							content: "toString()"
						}, {
							id: "B",
							content: "equals()"
						}, {
							id: "C",
							content: "compare()"
						}, {
							id: "D",
							content: "以上所有选项都不正确"
						}],
						answer: "B",
						userAnswer: "",
						explain: "java.lang包中Object的equals方法将比较两个对象是否相等，如果相等则返回true"
					},
					{
						id: 5,
						title: "在Java中,java.util.Arrays类中用来排序的方法是( )。",
						type: 1,
						optionList: [{
							id: "A",
							content: "sort()"
						}, {
							id: "B",
							content: "sorp()"
						}, {
							id: "C",
							content: "paixu()"
						}, {
							id: "D",
							content: "list()"
						}],
						answer: "A",
						userAnswer: "",
						explain: "Arrays是Java提供的一个类，而sort()是该类的一个方法，用于完成对数组的排序（升序）。因此A是正确选项"
					},
				],
			}
		},
		onReady() {
			var tempHeight = 800;
			var _me = this;
			uni.getSystemInfo({
				//获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高                
				success: function(res) {
					tempHeight = res.windowHeight;
					uni.createSelectorQuery().select("#top-box").fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						tempHeight -= data.height;
						uni.createSelectorQuery().select("#foot-box").fields({
							size: true,
							scrollOffset: true
						}, (data) => {
							tempHeight -= data.height;
							_me.swiperHeight = tempHeight + 'px';
						}).exec();
		
					}).exec();
				}
			});
		
		},
		onLoad(option) {
			this.currentType = this.questionList[0].type;
			uni.hideLoading();
			for (var j = 0; j < this.questionList.length; j++) {
				this.totalQuestionNumber = j;
			}
			for (var j = 0; j < this.questionList.length; j++) {
				this.totalNumber = j;
			}
			//添加用户显示答案字段
			for (var i = 0; i < this.questionList.length; i++) {
				this.$set(this.questionList[i], "showAnswer", false);
			}
			
			for (var i = 0; i < this.questionList.length; i++) {
				this.answerArr.push({id:this.questionList[i].id,answer:this.questionList[i].answer});
			}
			const userAnswerArr = uni.getStorageSync('userAnswerArr');
			if (userAnswerArr) {
				for (var i = 0;i< this.questionList.length ;i++) {
					for (var j = 0 ;j < userAnswerArr.length ;j++) {
						if (this.questionList[i].id == userAnswerArr[j].id) {
							this.questionList[i].userAnswer = userAnswerArr[j].value;
						}
					}
				}
			}
		},
		methods:{
			//题卡指定
			appointedQuestion: function(e) {
				this.modalCard = null;
				this.questionIndex = e;
			},
			//显示题卡
			showCardModal: function(e) {
				this.modalCard = e.currentTarget.dataset.target
			},
			//隐藏题卡
			hideCardModal: function(e) {
				this.modalCard = null
			},
			//滑动事件
			swiperChange: function(e) {
				let index = e.target.current;
				if (index != undefined) {
					this.questionIndex = index;
					this.currentType = this.questionList[index].type;
				}
			},
			//单选选中
			radioboxChange: function(e) {
				var items = this.questionList[this.questionIndex].optionList;
				var values = e.detail.value; //e.detail.value 用户的选择
				this.questionList[this.questionIndex].userAnswer = values;
				var flag = true;
				for (var i = 0; i< this.userAnswerArr.length; ++i ) {
					if (this.userAnswerArr[i].id == this.questionList[this.questionIndex].id) {
						this.userAnswerArr[i].value = values;
						flag = false;
						break;
					}
				}
				if (flag) {
					this.userAnswerArr.push({
						id: this.questionList[this.questionIndex].id,
						value: values
					});
				}
				if (this.autoRadioNext && this.questionIndex < this.questionList.length - 1) {
					this.questionIndex += 1;
				};
			},
			//复选选中
			checkboxChange: function(e) {
				var items = this.questionList[this.questionIndex].optionList;
				var values = e.detail.value;
				this.questionList[this.questionIndex].userAnswer = "";
				var lenI = items.length;
				var lenJ = values.length;
				console.log(items)
				console.log(values)
				var flag = true;
				for (var i = 0; i < this.userAnswerArr.length; ++i) {
					if (this.userAnswerArr[i].id == this.questionList[this.questionIndex].id) {
						this.userAnswerArr[i].value = values.sort().join(',');
						flag = false;
						break;
					}
				}
				if(flag) {
					this.userAnswerArr.push({
						id: this.questionList[this.questionIndex].id,
						value: values.sort().join(',')
					});
				}
			},
			//上一题、下一题
			moveQuestion: function(e) {
				if (e === -1 && this.questionIndex != 0) {
					this.questionIndex -= 1;
				}
				if (e === 1 && this.questionIndex < this.questionList.length - 1) {
					this.questionIndex += 1;
				}
			},
		}
	}
</script>

<style scoped>
	>>>.u-drawer{
		top:160upx;
	}
	>>>.u-mask-show{
		top:160upx;
	}
	.wrap{
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
	}
	.wrap .item{
		line-height: 80rpx;
	}
	page {
		background-color: #FFFFFF;
	}
	
	.cu-form-group {
		justify-content: flex-start;
	}
	
	.cu-form-group .title {
		padding-left: 30upx;
		padding-right: 0upx;
	}
	
	.cu-form-group+.cu-form-group {
		border-top: none;
	}
	
	.cu-bar-title {
		min-height: 50upx;
	}
	
	.cu-list.menu>.cu-item-error {
		justify-content: flex-start;
	}
	
	.bg-haveFinashed {
		background-color: #4CD964;
		color: #ffffff;
	}
	
	.uni-padding-wrap {
		width: 690upx;
		padding: 0 30upx;
		box-sizing: content-box;
	}
	
	.uni-common-mt {
		margin-top: 30upx;
	}
	
	.uni-flex {
		display: flex;
		flex-direction: row;
	}
	
	.uni-row {
		flex-direction: row;
	}
	
	.text {
		margin: 15upx 10upx;
		padding: 0 20upx;
		/* background-color: #ebebeb; */
		height: 70upx;
		line-height: 70upx;
		text-align: center;
		color: #777;
		font-size: 26upx;
	}
	
	.showMask {  
	  position: fixed;  
	  top:0;  
	  left:0;  
	  z-index:999;  
	  width:100%;  
	  height:100vh;  
	  background:rgba(0,0,0,0.4);
	}  
	.cu-dialog{
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		max-width: 100%;
		background-color: #f8f8f8;
		border-radius: 5px;
		overflow: hidden;
	}
	.padding{
		padding: 30upx;
		box-sizing: content-box;
	}
	.cu-btn{
		    position: relative;
		    border: 0px;
		    display: -webkit-inline-box;
		    display: -webkit-inline-flex;
		    display: inline-flex;
		    -webkit-box-align: center;
		    -webkit-align-items: center;
		    align-items: center;
		    -webkit-box-pack: center;
		    -webkit-justify-content: center;
		    justify-content: center;
		    box-sizing: border-box;
		    padding: 0 15px;
		    font-size: 14px;
		    height: 32px;
				border-radius: 32px;
		    line-height: 1;
		    text-align: center;
		    text-decoration: none;
		    overflow: visible;
		    margin-left: initial;
		    -webkit-transform: translate(0px, 0px);
		    transform: translate(0px, 0px);
		    margin-right: initial;
	}
</style>
